<template>
  <t-dialog
    :header="header"
    :visible.sync="visible"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    @confirm="onSubmit"
    :confirmBtn="{
        content: loading?'提交中...':'确认',
        theme: 'primary',
        loading: loading,
      }"
    width="40%"
    top="5%"
  >
    <t-form ref="form" :data="formData" labelWidth="100px" :rules="rules">
      <t-row style="row-gap: 24px">
        <t-col :span="12">
          <t-form-item label="登录名称" name="userName">
            <t-input
              clearable
              autocomplete="off"
              style="width: 390px"
              v-model="formData.userName"
              :maxlength="20"
              placeholder="请输入登录名称"
            />
          </t-form-item>
        </t-col>
        <t-col :span="12" v-if="userId===0">
          <t-form-item label="用户密码" name="password">
            <t-input
              clearable
              style="width: 390px"
              autocomplete="new-password"
              type="password"
              v-model="formData.password"
              :maxlength="20"
              placeholder="请输入密码"
            ></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="有效时间" name="dateRange">
            <t-date-range-picker  style="width: 390px" v-model="formData.dateRange" :placeholder="['开始时间', '结束时间']" clearable />
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
  </t-dialog>
</template>

<script>
import { getUser, updateUser, addUser } from '@/api/system/user';
import { treeselect, treeselectParty } from '@/api/system/dept';
import { encrypt } from '@/utils/jsencrypt';

export default {
  name: 'add-approver',
  // dicts: ['sys_normal_disable', 'sys_user_sex', 'duty', 'prof_tit', 'degree'],
  props: ['header', 'userId', 'deptId'],
  data() {
    return {
      visible: true,
      loading: false,
      sex: '',
      formData: {
        id: undefined,
        departmentId: null,
        userName: '',
        password: '',
        dateRange: [],
        userType: 4,
      },
      // 表单校验
      rules: {
        userName: [
          {
            required: true,
            message: '登录不能为空',
            trigger: 'blur',
          },
          {
            min: 2,
            max: 20,
            message: '登录名称长度必须介于 2 和 20 之间',
            trigger: 'blur',
          },
        ],
        departmentId: [
          {
            required: true,
            message: '归属单位不能为空',
          },
        ],
        nickName: [
          {
            required: true,
            message: '真实姓名不能为空',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '用户密码不能为空',
            trigger: 'blur',
          },
          {
            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@#$%^&*]{8,20}/,
            message: '请输入 8-20 个字符，需同时包含数字、大小写字母以及特殊符号',
            type: 'error',
            trigger: 'blur',
          },
        ],
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur',
          },
          { email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' },
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        dateRange: [
          {
            required: true,
            message: '有效时间不能为空'
          }
        ]
      },
    };
  },
  watch: {
    userId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getUser();
        }
      },
    },
  },
  created() {
  },
  methods: {
    getUser() {
      getUser(this.userId).then((response) => {
        this.formData = response.data;
        this.formData.dateRange = [response.data.effectiveStartDate, response.data.effectiveEndDate]
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    onSubmit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          const [s, e] = this.formData.dateRange
          this.formData.effectiveStartDate = s
          this.formData.effectiveEndDate = e
          this.loading = true;
          if (this.userId !== 0) {
            this.$api.system.user.updateReviewUser(this.formData)
              .then(() => {
                this.$message.success('修改成功');
                this.$emit('reload');
                this.$emit('update:visible', false);
                this.loading = false;
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.toString());
              });
          } else {
            this.formData.departmentId = this.deptId
            this.$api.bzh.approve.registerBzhReview(this.formData)
              .then(() => {
                this.$message.success('新增成功');
                this.$emit('reload');
                this.$emit('update:visible', false);
                this.loading = false;
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.toString());
              });
          }
        }
      });
    },
    closeDialog() {
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style scoped></style>
